/**
 * Created by heshufen on 20/6/21.
 */
import React from 'react';
import {Image, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import Screen from '../../base/Screen';
import Horizontal from '../../../components/Horizontal';

export default class ChooseGenderScreen extends Screen {

    renderBody(navigation) {
        return (
            <View>
                <Horizontal style={styles.titleContainer}>
                    <Text style={styles.title}>选择性别</Text>
                    <Text style={styles.title1}>1<Text style={styles.title2}>/8</Text></Text>
                </Horizontal>
                <Text style={styles.desc}>让对方知道你是帅哥还是美女吧！</Text>
                <Horizontal style={styles.gendersContainer}>
                    <TouchableOpacity style={[styles.genderContainer, {marginRight: 67}]} onPress={() => {
                        this.props.navigation.navigate("ChooseBirthday",{gender:0})
                    }}>
                        <Image style={styles.genderImage}
                               source={require('../../../assets/login/information/icon_male.png')}
                        />
                        <Text style={styles.genderTitle}>男士</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.genderContainer} onPress={() => {
                        this.props.navigation.navigate("ChooseBirthday",{gender:1})
                    }}>
                        <Image style={styles.genderImage}
                               source={require('../../../assets/login/information/icon_female.png')}
                        />
                        <Text style={styles.genderTitle}>女士</Text>
                    </TouchableOpacity>
                </Horizontal>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    titleContainer: {
        marginTop: 53,
        marginLeft: 18,
        marginRight: 18,
        marginBottom: 8,
        alignItems: 'center',
    },
    title: {
        flex: 1,
        fontWeight: 'bold',
        fontSize: 28,
        color: '#1e1e1e',
    },
    title1: {
        fontFamily: 'PingFang-SC-Medium',
        fontSize: 20,
        color: '#1e1e1e',
    },
    title2: {
        fontFamily: 'PingFang-SC-Medium',
        fontSize: 20,
        color: '#858585',
    },
    desc: {
        marginLeft: 18,
        marginBottom: 102,
        fontFamily: 'PingFang-SC-Medium',
        fontSize: 15,
        color: '#b0b0b0',
    },
    gendersContainer: {
        justifyContent: 'center',
    },
    genderContainer: {
        alignItems: 'center',
    },
    genderImage: {
        width: 90,
        height: 90,
        marginBottom: 15,
    },
    genderTitle: {
        fontFamily: 'PingFang-SC-Medium',
        fontSize: 17,
        color: '#1e1e1e',
    },
});
